<template>
  <div class="child_page" @click="$emit('hidden')">
    <div id="child-map">
      <div @click="fanhui" class="style">
        <a-icon type="left" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import xiningJson from '../json/xining.json'
import guoluoJson from '../json/guoluo.json'
import haibeiJson from '../json/haibei.json'
import haidongJson from '../json/haidong.json'
import hainanJson from '../json/hainan.json'
import haixiJson from '../json/haixi.json'
import huangnanJson from '../json/huangnan.json'
import yushuJson from '../json/yushu.json'
import geermuJson from '../json/geermu.json'
import RenderChildMap from './RenderChildMap'
import { onMounted, ref } from 'vue'


const props = defineProps({
  cityProps: {
    type: Object,
    default: null
  }
})
const emit = defineEmits()

const map = ref()

const initMap = (index: number) => {
  let json
  let svgPath = ''
  switch (index) {
    case 0:
      json = xiningJson
      svgPath = 'xining'
      break
    case 1:
      json = haidongJson
      svgPath = 'haidong'
      break
    case 2:
      json = haibeiJson
      svgPath = 'haibei'
      break
    case 3:
      json = huangnanJson
      svgPath = 'huangnan'
      break
    case 4:
      json = hainanJson
      svgPath = 'hainan'
      break
    case 5:
      json = guoluoJson
      svgPath = 'guoluo'
      break
    case 6:
      json = yushuJson
      svgPath = 'yushu'
      break
    case 7:
      json = haixiJson
      svgPath = 'haixi'
      break
    case 8:
      json = geermuJson
      svgPath = 'geermu'
    default:
      break
  }
  if (!map.value) {
    map.value = new RenderChildMap(document.getElementById('child-map'), json)
  }

  map.value.setOption({
    svgPath: `../map/${svgPath}.svg`
  })
}
const fanhui = () => {
  emit('hiddenMunicipalMap')
}



onMounted(() => {
  const index = props.cityProps.cityIndex
  initMap(index)
})
</script>

<style>
.style {
  /* width: 200px;
  height: 60px; */
  line-height: 60px;
  z-index: 999;
  /* margin-left: 50px; */
  /* padding-top: 15px; */
  font-size: 20px;
  cursor: pointer;
}

.child_page {
  /* width: 80%;
  height: 80%; */
  /* background-color: rgba(187, 187, 187, .7); */
  /* background-color: #fff; */
}

#svgChildMap {
  width: 80%;
}
</style>
